<template>
  <div class="editor-contact" :style="{ backgroundColor: props.backgroundColor }">
    <div class="contact-title" :style="{ color: props.titleColor }">
      {{ props.title }}
    </div>
    
    <div class="contact-items">
      <div v-if="props.showPhone" class="contact-item">
        <i class="contact-icon el-icon-phone" :style="{ color: props.iconColor }"></i>
        <div class="contact-info">
          <div class="contact-label">电话</div>
          <div class="contact-value">{{ props.phone }}</div>
        </div>
      </div>
      
      <div v-if="props.showEmail" class="contact-item">
        <i class="contact-icon el-icon-message" :style="{ color: props.iconColor }"></i>
        <div class="contact-info">
          <div class="contact-label">邮箱</div>
          <div class="contact-value">{{ props.email }}</div>
        </div>
      </div>
      
      <div v-if="props.showWechat" class="contact-item">
        <i class="contact-icon el-icon-chat-dot-round" :style="{ color: props.iconColor }"></i>
        <div class="contact-info">
          <div class="contact-label">微信</div>
          <div class="contact-value">{{ props.wechat }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
  phone: {
    type: String,
    default: '010-12345678'
  },
  email: {
    type: String,
    default: 'contact@example.com'
  },
  wechat: {
    type: String,
    default: 'example_wechat'
  },
  showPhone: {
    type: Boolean,
    default: true
  },
  showEmail: {
    type: Boolean,
    default: true
  },
  showWechat: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: '联系我们'
  },
  backgroundColor: {
    type: String,
    default: '#ffffff'
  },
  titleColor: {
    type: String,
    default: '#333333'
  },
  iconColor: {
    type: String,
    default: '#8B4513'
  }
});

defineOptions({
  name: 'editor-contact'
});
</script>

<style lang="scss" scoped>
.editor-contact {
  width: 100%;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  .contact-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
  }
  
  .contact-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
    
    .contact-item {
      display: flex;
      align-items: center;
      
      .contact-icon {
        font-size: 24px;
        margin-right: 15px;
      }
      
      .contact-info {
        .contact-label {
          font-size: 12px;
          color: #999;
          margin-bottom: 2px;
        }
        
        .contact-value {
          font-size: 14px;
          color: #333;
        }
      }
    }
  }
  
  &:hover {
    outline: 1px dashed #ccc;
  }
}
</style> 